<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <tab :line-width="1">
      <tab-item selected  @on-item-click="show = 'teacher'">教师介绍</tab-item>
      <tab-item @on-item-click="show = 'course'">课程列表</tab-item>
    </tab>
    <box gap="10px" v-if="show === 'course'">
      <template v-if="data">
        <course v-for="(item, index) in data.courses" :key="index" :product="item"></course>
      </template>
      <empty v-if="data !== null && data.courses.length === 0" tips="暂无课程"></empty>
    </box>
    <box gap="10px" v-if="show === 'teacher'">
      <template v-if="data">
        <div class="content" v-html="data.details"></div>
      </template>
      <empty v-if="data !== null && !data.details" tips="暂无介绍"></empty>
    </box>
    <div slot="bottom" class="action-bar" v-if="data">
      <x-button type="warn" @click.native="$router.push('/chat/' + data.id)">咨询</x-button>
    </div>
  </view-box>
</template>
<style>
</style>
<script>
  import Course from '../components/Course'
  import { TransferDom, ViewBox, Tab, TabItem, Box, Group, Cell, XButton } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    data () {
      return {
        teacherId: 0,
        data: null,
        show: 'teacher'
      }
    },
    computed: {
      userInfo () {
        return this.$store.getters.userInfo
      }
    },
    components: {
      ViewBox,
      Tab,
      TabItem,
      Group,
      Cell,
      XButton,
      Course,
      Box
    },
    mounted () {
      this.teacherId = this.$route.params.teacher
      this._getData()
    },
    methods: {
      _getData () {
        this.$vux.loading.show()
        this.$http.get('/users/' + this.teacherId).then((response) => {
          this.$vux.loading.hide()
          this.data = response.data
        }).catch((error) => {
          console.log(error)
          this.$vux.loading.hide()
        })
      }
    }
  }
</script>
<style scoped lang="less">
 .action-bar {
    position: fixed;
    z-index: 500;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .weui-btn {
    border-radius: 0;
    border: none;
    &:after {
      border-radius: 0;
    border: none;
    }
  }
</style>